<template>
  <div class="goods-two-box">
    <goods-top-box>
      <template v-slot:left-one>
        <div>{{ titleLeft }}</div>
      </template>
      <template v-slot:right-one>
        <div :id="item.key" class="special" @mouseenter="getRightGoods(item.key);changeColor(item.key,index)"
             ref="rightMessage"
             v-for="(item,index) in titleRight"
             :key="item.key">
          {{ item.name }}
        </div>
      </template>
    </goods-top-box>
    <goods-image-box>
      <template v-slot:leftImage>
        <div class="box-left">
          <ul class="box-list">
            <li class="box-item" v-for="good in leftGoods">
              <a :href="good.sourceUrl" target="_blank">
                <img :src="good.imgUrl" alt=""/>
              </a>
            </li>
          </ul>
        </div>
      </template>
      <template v-slot:rightImage>
        <div class="box-right">
          <ul class="box-list">
            <template
                v-for="(good,index) in rightGoods"
                v-if="index < rightGoods.length - 1">
              <li class="box-item">
                <a :href="good.sourceUrl" target="_blank">
                  <img :src="good.imgUrl" alt=""/>
                  <h3 class="box-title">{{ good.title }}</h3>
                </a>
                <p class="price">{{ good.price }}元</p>
                <p class="evaluation">{{ good.heat }}人评价</p>
                <div class="review" v-show="good.reviewStatus">
                  <span class="review-content">{{ good.reviewDesc }}</span>
                  <span class="review-author">来自于{{ good.reviewAuthor }}的评价</span>
                </div>
              </li>
            </template>
            <template v-if="lastGoods">
              <li>
                <div class="item-small">
                  <a :href="lastGoods.sourceUrl" target="_blank">
                    <div class="desc">
                      <h3 class="title">
                        {{ lastGoods.title }}
                      </h3>
                      <span class="price">
									{{ lastGoods.price }}元
								      </span>
                    </div>
                    <img class="small-img"
                         :src="lastGoods.imgUrl" alt=""/>
                  </a>
                </div>
                <div class="item-small read-more">
                  <a :href="lastGoods.moreUrl" target="_blank">
                    <div class="desc">
                      <h3 class="title">
                        浏览更多
                      </h3>
                      <span class="price hot">
									      热门
								      </span>
                    </div>
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-jinrujiantouxiao"></use>
                    </svg>
                  </a>
                </div>
              </li>
            </template>
          </ul>
          <ul class="goods-right-small">
          </ul>
        </div>
      </template>
    </goods-image-box>
  </div>
</template>

<script>
import GoodsTopBox from "@/components/Mi/Common/GoodsTopBox";
import GoodsImageBox from "@/components/Mi/Common/GoodsImageBox";
import '@/assets/font/goodstwo/arrow'

export default {
  components: {
    GoodsTopBox,
    GoodsImageBox,
  },
  name: "GoodsThree",
  data() {
    return {
      titleLeft: '',
      titleRight: [],
      leftGoods: [],
      rightGoods: [],
      hot: [],
      protect: [],
      fiol: [],
      battery: [],
      nowKey: 'hot',
    }
  },
  created() {
    this.getGoodsCollocation()
  },
  computed: {
    lastGoods: function () {
      if (this.rightGoods && this.rightGoods.length > 0) {
        return this.rightGoods[this.rightGoods.length - 1]
      } else {
        return null
      }
    }
  },
  mounted() {
  
  },
  methods: {
    async getGoodsCollocation() {
      const {data: res} = await this.$http.get('accessories')
      this.titleLeft = res.topTitle
      this.titleRight = res.subs
      this.leftGoods = res.leftGoods
      this.hot = res.hot
      this.protect = res.protect
      this.fiol = res.fiol
      this.other = res.other
      this.rightGoods = this.hot
      console.log(res)
    },
    changeColor(key, index) {
      let elements = this.$refs.rightMessage
      let element = this.$refs.rightMessage[index]
      let id = element.getAttribute('id')
      elements.forEach(element => {
        if (element.getAttribute('id') === id) {
          element.setAttribute('style', 'color: #ED702F; border-bottom: 3px solid #ED702F;')
        } else {
          element.setAttribute('style', '')
        }
      })
    },
    getRightGoods(key) {
      this.nowKey = key
      this.rightGoods = this[key]
    },
  },
}
</script>

<style scoped lang="less">


.box-left {
  height: 628px;
  width: 234px;
  
  .box-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    
    .box-item {
      margin: 0 0 14px 14px;
      width: 234px;
      height: 300px;
      background: #fff;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 5px 5px 20px #ccc;
      }
      
      img {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0 auto;
      }
      
    }
    
    
  }
}

.box-right {
  float: left;
  width: 992px;
  height: 628px;
  
  .box-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    
    
    .box-item {
      position: relative;
      margin: 0 0 14px 14px;
      padding: 20px 0;
      width: 234px;
      height: 300px;
      background: #fff;
      transition: all 0.3s;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 5px 5px 20px #ccc;
      }
      
      .box-title {
        font-size: 14px;
        text-align: center;
        color: #333;
        font-weight: normal;
      }
      
      
      img {
        display: block;
        width: 160px;
        height: 160px;
        margin: 0 auto;
      }
      
      .price {
        text-align: center;
        color: #ED702F;
        font-size: 14px;
      }
      
      .evaluation {
        text-align: center;
        color: #b0b0b0;
        font-size: 12px;
      }
      
      .review {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 234px;
        font-size: 12px;
        height: 0;
        line-height: 18px;
        overflow: hidden;
        box-sizing: border-box;
        color: #ffffff;
        background: #ff6700;
        opacity: 0;
        transition: all 0.3s;
        
        .review-content {
          display: block;
          text-align: center;
          margin: 8px 30px;
        }
        
        .review-author {
          display: block;
          text-align: center;
          margin-bottom: 8px;
        }
      }
      
    }
    
    .box-item:hover {
      .review {
        height: 75px;
        opacity: 1;
      }
    }
    
    
    .item-small {
      width: 234px;
      height: 143px;
      margin: 0 0 14px 14px;
      padding: 30px 0 0 30px;
      background: #fff;
      cursor: pointer;
      transition: all 0.3s;
      box-sizing: border-box;
      
      &:hover {
        transform: translateY(-1px);
        box-shadow: 5px 5px 20px #ccc;
      }
      
      .desc {
        float: left;
        width: 80px;
        height: 100%;
        margin-right: 20px;
        
        .title {
          font-size: 14px;
          text-align: center;
          color: #333;
          font-weight: normal;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        
        .price {
          margin-top: 20px;
          display: block;
          width: 100%;
          color: #ff6700;
          font-size: 14px;
          text-align: center;
        }
      }
      
      .small-img {
        float: left;
        width: 80px;
        height: 80px;
      }
      
      .icon {
        font-size: 3em;
        color: #ff6700;
      }
    }
    
    .icon-arrow {
      margin-top: 5px;
      color: #ff6700;
    }
  }
}
</style>
